<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/templates/mantenimiento.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                    
                xmlns:r="http://richfaces.org">
    <ui:define name="title">
        Administración de menús
    </ui:define>    
    <ui:define name="datos">
        <h:panelGrid id="panelDatos">
            <h:form id="formDatos">
                <r:panel header="Gestionar Menus" styleClass="curved" >
                    <h:panelGrid columns="2" styleClass="tablaFull" columnClasses="alignTop, alignTop">                       
                        <r:panel styleClass="curved" >
                            <r:tree var="item"  id="arbol" render="data panelBotones" nodeType="#{empty item.admMenuList?'b':'a'}" 
                                    toggleType="ajax" selectionType="ajax" selectionChangeListener="#{jsfMenu.selectionChanged}" 
                                    >
                                <f:ajax  event="selectionchange"  />
                                <r:treeModelRecursiveAdaptor roots="#{jsfMenu.treeRoot}" nodes="#{item.admMenuList}">
                                    <r:treeNode type="a" iconLeaf="/images/icons/bullet-green-icon-16_png.png">
                                        <h:outputText value="(#{item.secuencia}) #{item.nombre}" styleClass="textoNegrita grown-text"/> 
                                    </r:treeNode>
                                    <r:treeNode type="b" iconLeaf="/images/icons/bullet-blue-icon-16_png.png">
                                        <h:outputText value="(#{item.secuencia}) #{item.nombre}" /> 
                                    </r:treeNode>
                                </r:treeModelRecursiveAdaptor>
                            </r:tree>
                        </r:panel>
                        <r:panel styleClass="curved" >
                            <h:panelGrid columns="4" id="data">
                                <h:graphicImage library="images/ajax" name="bullet.gif" styleClass="pic" />
                                <h:outputText value="Sistema:" />
                                <h:selectOneMenu  label="Sistema" id="sistema"  converter="JsfConverterSistema" required="true" value="#{jsfMenu.object.admSistema}" >
                                    <f:selectItems value="#{jsfSistema.selectedItem}" var="item"/>
                                </h:selectOneMenu>
                                <r:message for="sistema"/>

                                <h:graphicImage library="images/ajax" name="bullet.gif" styleClass="pic" />
                                <h:outputText value="Menú:" />
                                <h:selectOneMenu  label="Sistema" id="menu"  converter="JsfConverterMenu"  value="#{jsfMenu.object.admMenu}" >
                                    <f:selectItem itemLabel="Seleccione ..."/>
                                    <f:selectItems value="#{jsfMenu.selectedItem}" var="item"/>
                                </h:selectOneMenu>
                                <r:message for="menu"/>

                                <f:verbatim  rendered="#{not empty jsfMenu.object.admMenu}"/>
                                <h:outputText value="Menu:" rendered="#{not empty jsfMenu.object.admMenu}"/>
                                <h:outputText value="#{jsfMenu.object.admMenu.nombre}" rendered="#{not empty jsfMenu.object.admMenu}" styleClass="texto18 textoColorTomate"/>                            
                                <f:verbatim  rendered="#{not empty jsfMenu.object.admMenu}"/>

                                <h:graphicImage library="images/ajax" name="bullet.gif" />
                                <h:outputLabel for="codigo" value="Código:" />
                                <h:inputText id="codigo"  size="50" maxlength="50" required="true" value="#{jsfMenu.object.clave}"  >
                                    <f:validateLength minimum="3" />
                                </h:inputText>
                                <r:message for="codigo" />

                                <h:graphicImage library="images/ajax" name="bullet.gif" />
                                <h:outputLabel for="nombre" value="Nombre:" />
                                <h:inputText id="nombre"  size="50" maxlength="50" required="true" value="#{jsfMenu.object.nombre}"  >
                                    <f:validateLength minimum="3" />
                                </h:inputText>
                                <r:message for="nombre" />

                                <f:verbatim/>
                                <h:outputLabel for="url" value="URL:" />
                                <h:inputText id="url"  size="50" maxlength="250" value="#{jsfMenu.object.url}"  />
                                <r:message for="url" />

                                <f:verbatim/>
                                <h:outputLabel for="icon" value="Ícono:" />
                                <h:inputText id="icon"  size="50" maxlength="80"  value="#{jsfMenu.object.icon}" />
                                <r:message for="icon" />

                                <f:verbatim/>
                                <h:outputLabel for="toolTip" value="Tooltiptext:" />
                                <h:inputText id="toolTip"  size="50" maxlength="250"  value="#{jsfMenu.object.tooltiptext}" />
                                <r:message for="toolTip" />

                                <f:verbatim/>
                                <h:outputLabel for="accion" value="Acción:" />
                                <h:inputText id="accion"  size="50" maxlength="80"  value="#{jsfMenu.object.accion}" />
                                <r:message for="accion" />

                                <f:verbatim/>
                                <h:outputLabel for="secuencia" value="Secuencia:" />
                                <h:inputText id="secuencia"  size="5" maxlength="2"  value="#{jsfMenu.object.secuencia}" />
                                <r:message for="secuencia" />

                                <f:verbatim/>
                                <h:outputLabel for="opcion" value="Opción:" />
                                <h:selectOneMenu id="opcion"  value="#{jsfMenu.object.obligatorio}" >
                                    <f:selectItem itemValue="0" itemLabel="Aparece siempre"/>
                                    <f:selectItem itemValue="1" itemLabel="Requiere iniciar sesión"/>
                                    <f:selectItem itemValue="2" itemLabel="Requiere iniciar sesión y permisos"/>
                                </h:selectOneMenu>
                                <r:message for="opcion"/>
                                <f:verbatim/>
                                <h:outputLabel for="visible" value="Es menú:" />
                                <h:selectBooleanCheckbox id="visible" value="#{jsfMenu.visible}"/>
                                <f:verbatim/>
                            </h:panelGrid>
                            <h:panelGrid >
                                <h:panelGroup id="panelBotones">
                                    <h:commandButton id="btGrabar" value="Grabar" action="#{jsfMenu.grabarAction}"  title="Grabar">
                                        <f:ajax execute="@form" event="action" render="@form :arbolForm"/>
                                    </h:commandButton>
                                    <h:commandButton id="btNuevoMenu" value="Nuevo menú" action="#{jsfMenu.nuevoAction}" immediate="true"  title="Nuevo menú" >
                                        <f:ajax event="action" render="@form"/>
                                    </h:commandButton>
                                    <h:commandButton id="btNuevoItem" value="Nuevo ítem" action="#{jsfMenu.nuevoMenuItemAction}"  title="Nuevo ítem" rendered="#{not empty jsfMenu.object.idMenu}">
                                        <f:ajax event="action" render="@form"/>
                                    </h:commandButton>
                                    <h:commandButton id="btEliminar" value="Eliminar" action="#{jsfMenu.eliminarAction}"  title="Eliminar registro"  onclick="if (!confirm('Seguro que desea eliminar el registro?')) {
                                                return false;
                                            }">
                                        <f:ajax event="action" render="@form :arbolForm"/>
                                    </h:commandButton>
                                    <r:status id="commonStatus">
                                        <f:facet name="start">
                                            <h:graphicImage library="images/ajax" name="status2.gif"/>
                                        </f:facet>
                                    </r:status>
                                </h:panelGroup>
                                <r:message for="formDatos">
                                    <f:facet name="errorMarker">
                                        <h:graphicImage library="images/ajax" name="warning.gif"/>
                                    </f:facet>
                                    <f:facet name="infoMarker">
                                        <h:graphicImage library="images/ajax" name="passed.gif"/>
                                    </f:facet>
                                </r:message>
                            </h:panelGrid>
                            <h:panelGroup >
                                <h:graphicImage library="images/ajax" name="bullet.gif" />
                                <h:outputText value="Campo obligatorio"/>
                            </h:panelGroup>
                        </r:panel>

                    </h:panelGrid>
                </r:panel>
            </h:form>

            <div class="separador" />
            <p /> 

            <f:verbatim />
            <h:form id="formAcciones">
                <r:panel header="Asignar acciones a menú" styleClass="curved" >
                    <h:panelGrid columns="2" styleClass="tablaFull" columnClasses="alignTop, alignTop">
                        <r:panel styleClass="curved" >
                            <r:tree var="item"  id="arbolAccion" render="dataA panelBotonesAccion" nodeType="#{empty item.admMenuList?'b':'a'}" 
                                    toggleType="ajax" selectionType="ajax" selectionChangeListener="#{jsfMenu.selectionChangedAcciones}" 
                                    >
                                <f:ajax  event="selectionchange"  />
                                <r:treeModelRecursiveAdaptor roots="#{jsfMenu.treeRoot}" nodes="#{item.admMenuList}">
                                    <r:treeNode type="a" >
                                        <h:outputText value="#{item.nombre}" styleClass="textoNegrita grown-text"/> 
                                    </r:treeNode>
                                    <r:treeNode type="b" >
                                        #{item.nombre} 
                                    </r:treeNode>
                                </r:treeModelRecursiveAdaptor>
                            </r:tree>
                        </r:panel>
                        <r:panel styleClass="curved" >
                            <h:panelGrid  id="dataA" styleClass="tablaFull">
                                <r:pickList  id="pickList1" converter="JsfConverterAccion" value="#{jsfMenu.accionesAsignados}" styleClass="alignTop"
                                            targetCaption="Acciones asignados"  sourceCaption="Acciones disponibles"  listHeight="200px">
                                    <f:selectItems value="#{jsfMenu.selectedItemAccionesNoAsignadas}"/>
                                    <f:selectItems value="#{jsfMenu.selectedItemAccionesAsignadas}"/>
                                </r:pickList>
                                <r:message for="pickList1"/>
                            </h:panelGrid>
                            <h:panelGrid >
                                <h:panelGroup id="panelBotonesAccion">
                                    <h:commandButton id="btGrabarA" value="Grabar" action="#{jsfMenu.grabarMenuAction}"  title="Grabar">
                                        <f:ajax execute="pickList1" event="action" render="dataA"/>
                                    </h:commandButton>
                                    <r:status id="commonStatusA">
                                        <f:facet name="start">
                                            <h:graphicImage library="images/ajax" name="status2.gif"/>
                                        </f:facet>
                                    </r:status>
                                </h:panelGroup>

                                <r:message for="panelBotonesAccion">
                                    <f:facet name="errorMarker">
                                        <h:graphicImage library="images/ajax" name="warning.gif"/>
                                    </f:facet>
                                    <f:facet name="infoMarker">
                                        <h:graphicImage library="images/ajax" name="passed.gif"/>
                                    </f:facet>
                                </r:message>
                            </h:panelGrid>
                        </r:panel>

                    </h:panelGrid>
                </r:panel>
            </h:form>

            <div class="separador" />

            <f:verbatim />
            <h:form id="arbolForm">
                <r:panel header="Asignar menus a sistema #{jsfMenu.sistemaSeleccionado.nombre}" styleClass="curved" id="panenlMenu">
                    <h:panelGrid columns="4" columnClasses="alignTop, alignTop, , alignTop">
                        <r:panel styleClass="curved" id="panelMenuNoAsignado">
                            <h:outputText value="Menus disponibles"/>
                            <r:tree var="item"  id="arbolMenuAsignados" render="panelMenuBotones" nodeType="#{empty item.admMenuList?'b':'a'}" 
                                    toggleType="ajax" selectionType="ajax" selectionChangeListener="#{jsfMenu.selectionChangedNoAsignado}" 
                                    >
                                <f:ajax  event="click" listener="#{jsfMenu.noAsignadosSelectionListener()}"/>
                                <r:treeModelRecursiveAdaptor roots="#{jsfMenu.treeRootMenuNoAsignados}" nodes="#{item.admMenuList}">
                                    <r:treeNode type="a" >
                                        <h:outputText value="#{item.nombre}" styleClass="textoNegrita grown-text"/> 
                                    </r:treeNode>
                                    <r:treeNode type="b" >
                                        #{item.nombre} 
                                    </r:treeNode>
                                </r:treeModelRecursiveAdaptor>
                            </r:tree>
                        </r:panel>
                        <h:panelGrid id="panelMenuBotones">                                
                            <h:commandButton value="&lt;--" disabled="#{jsfMenu.asignado != 1 or empty jsfMenu.objSeleccionado}">
                                <f:ajax listener="#{jsfMenu.eliminarMenuButtonListener}" render="panelMenuAsignado panelMenuNoAsignado panelMenuBotones estado1"/>
                            </h:commandButton>
                            <h:commandButton value="--&gt;" disabled="#{jsfMenu.asignado != 2 or empty jsfMenu.objSeleccionado}">
                                <f:ajax listener="#{jsfMenu.agregarMenuButtonListener}" render="panelMenuAsignado panelMenuNoAsignado panelMenuBotones estado1"/>
                            </h:commandButton>
                            <h:outputText value="#{jsfMenu.objSeleccionado.nombre}"/>
                        </h:panelGrid>
                        <r:panel styleClass="curved" id="panelMenuAsignado">
                            <h:outputText value="Menus asignados"/>
                            <r:tree var="item"  id="arbolMenuDisponibles" render="panelMenuBotones" nodeType="#{empty item.admMenuList?'b':'a'}" 
                                    toggleType="ajax" selectionType="ajax" selectionChangeListener="#{jsfMenu.selectionChangedAsignado}">
                                <f:ajax  event="click" listener="#{jsfMenu.asignadosSelectionListener()}"/>
                                <r:treeModelRecursiveAdaptor roots="#{jsfMenu.treeRootMenuAsignados}" nodes="#{item.admMenuList}">
                                    <r:treeNode type="a" >
                                        <h:outputText value="#{item.nombre}" styleClass="textoNegrita grown-text"/> 
                                    </r:treeNode>
                                    <r:treeNode type="b" >
                                        #{item.nombre} 
                                    </r:treeNode>
                                </r:treeModelRecursiveAdaptor>
                            </r:tree>
                        </r:panel>


                    </h:panelGrid>
                    <h:panelGroup id="estado1">
                        <r:status id="commonStatus1">
                            <f:facet name="start">
                                <h:graphicImage library="images/ajax" name="status2.gif"/>
                            </f:facet>
                        </r:status>
                        <r:message for="arbolForm">
                            <f:facet name="errorMarker">
                                <h:graphicImage library="images/ajax" name="warning.gif"/>
                            </f:facet>
                            <f:facet name="infoMarker">
                                <h:graphicImage library="images/ajax" name="passed.gif"/>
                            </f:facet>
                        </r:message>
                    </h:panelGroup>
                </r:panel>
            </h:form>
        </h:panelGrid>
    </ui:define>
</ui:composition>
